<template>
  <div id="main">
    <div id="mask" v-show="isshow" @touchstart="hidbox"></div>
    <div class="top-box">
      <div class="title">书架</div>
      <div class="imgbtn">
        <div>
          <img src="@/assets/书架/u4050.png" alt />
        </div>
        <div @touchstart="gobookshelf2">
          <img src="@/assets/书架/2_u4052.png" alt />
        </div>
        <div @touchstart="showbox">
          <img src="@/assets/书架/u4056.png" alt />
          <img src="@/assets/书架/u4056.png" alt />
          <img src="@/assets/书架/u4056.png" alt />
        </div>
      </div>
      <div class="more" v-show="isshow">
        <img class="arrow" src="@/assets/tabbar/u2648.png" alt />
        <ul>
          <li @touchstart="goqrcode">
            <img src="@/assets/tabbar/u4097.png" alt />
            <span>扫一扫</span>
          </li>
          <li>
            <img src="@/assets/tabbar/u4100.png" alt />
            <span>阅读记录</span>
          </li>
          <li>
            <img src="@/assets/tabbar/u4100.png" alt />
            <span>我的书单</span>
          </li>
        </ul>
      </div>
    </div>
    <div>
      <router-view></router-view>
    </div>
    <div class="bottom-box">
      <div class="navbox" @touchstart="gohome">
        <div class="navimg bookstore" :class="{'bookstore-s':ishome==0}"></div>
        <p :class="{greenfont:ishome==0}">书城</p>
      </div>
      <div class="navbox" @touchstart="goclass">
        <div class="navimg kind" :class="{'kind-s':isclass==1}"></div>
        <p :class="{greenfont:isclass==1}">分类</p>
      </div>
      <div class="navbox" @touchstart="gobook">
        <div class="navimg bookshelf" :class="{'bookshelf-s':isbook==2}"></div>
        <p :class="{greenfont:isbook==2}">书架</p>
      </div>
      <div class="navbox" @touchstart="gomine">
        <div class="navimg mine" :class="{'mine-s':ismine==3}"></div>
        <p :class="{greenfont:ismine==3}">我的</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ishome: -1,
      isclass: -1,
      isbook: 2,
      ismine: -1,
      goshelf: true,
      isshow:false
    };
  },
  methods: {
    gobookshelf2() {
      if (this.goshelf) {
        this.$router.push(
          {
            path: "/bookshelf2"
          },
          () => {}
        );
        this.goshelf = false;
      } else {
        this.$router.push(
          {
            path: "/bookshelf1"
          },
          () => {}
        );
        this.goshelf = true;
      }
    },
    showbox(){
      if(!this.isshow){
        this.isshow=true
      }
    },
    hidbox(){
      if(this.isshow){
        this.isshow=false
      }
    },
    goqrcode(){
      this.$router.push({
        path:'/qrcode'
      },()=>{})
    },
    gohome() {
      this.ishome = 0;
      (this.isclass = -1), (this.isbook = -1), (this.ismine = -1);
    },
    goclass() {
      this.isclass = 1;
      (this.ishome = -1), (this.isbook = -1), (this.ismine = -1);
    },
    gobook() {
      this.isbook = 2;
      (this.isclass = -1), (this.ishome = -1), (this.ismine = -1);
    },
    gomine() {
      this.ismine = 3;
      (this.isclass = -1), (this.isbook = -1), (this.ishome = -1);
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  box-sizing: border-box;
  width: 100%;
  padding: 0 1.5rem;
  #mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    background-color: rgba(0, 0, 0, 0.368627450980392);
    z-index: 98;
  }
  .top-box {
    display: flex;
    width: 100%;
    height: 3.4rem;
    justify-content: space-between;
    .more {
      position: fixed;
      z-index: 99;
      top: 10%;
      left: 70%;
      width: 11.1rem;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border-width: .1rem;
      border-style: solid;
      border-color: rgba(228, 228, 228, 1);
      border-radius: .5rem;
      .arrow{
        position: absolute;
        top: -0.9rem;
        right: 2rem;
      }
      ul {
        list-style: none;
        li{
          height: 3.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: .1rem solid rgba(228, 228, 228, 1);
          &:last-of-type{
            border-bottom: none;
          }
          span{
            width: 6.4rem;
            text-align: left;
            margin-left:.5rem ;
          }
        }
      }
    }
    .title {
      font-family: "PingFangSC-Medium", "PingFang SC Medium", "PingFang SC";
      font-weight: 500;
      font-style: normal;
      font-size: 2.4rem;
      color: #1a1c33;
      text-align: left;
    }
    .imgbtn {
      display: flex;
      align-items: center;
      div {
        &:nth-of-type(2) {
          margin-left: 4rem;
          margin-right: 1rem;
        }
        &:last-of-type {
          display: flex;
          align-content: center;
          img {
            margin: 0 .1rem;
          }
        }
      }
    }
  }
  .bottom-box {
    box-sizing: border-box;
    padding-top: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4.9rem;
    display: flex;
    justify-content: space-around;
    font-family: "SourceHanSansSC-Normal", "思源黑体 Normal", "思源黑体";
    font-weight: 400;
    font-style: normal;
    font-size: 1.4rem;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0rem;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: 0rem 0rem 1rem 0rem rgb(0 0 0 / 20%);
    .navbox {
      width: 2.1rem;
      .navimg {
        width: 2.1rem;
        height: 1.9rem;
      }
      .kind {
        background: url("@/assets/tabbar//class.png") no-repeat;
      }
      .bookstore {
        background: url("@/assets/tabbar/home.png") no-repeat;
      }
      .bookshelf {
        background: url("@/assets/tabbar/book.png") no-repeat;
      }
      .mine {
        background: url("@/assets/tabbar/mine.png") no-repeat;
      }
      .kind-s {
        background: url("@/assets/tabbar/class-s.png") no-repeat;
      }
      .bookshelf-s {
        background: url("@/assets/tabbar/book-s.png") no-repeat;
      }
      .bookstore-s {
        background: url("@/assets/tabbar/home-s.png") no-repeat;
      }
      .mine-s {
        background: url("@/assets/tabbar/mine-s.png") no-repeat;
      }
      p {
        width: 2.1rem;
        height: 1.9rem;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        font-style: normal;
        font-size: 1rem;
        color: #cccccc;
        text-align: center;
      }
      .greenfont {
        color: rgba(65, 200, 114, 1);
      }
    }
  }
}
</style>